<template>
  <div class="finishContainer">
    <h3>已经完成</h3>
    <div v-if="thingsStore.finishList.length !== 0" v-for="item in thingsStore.finishList" key="item.th_id">
      <todoItem :id="item.th_id" :content="item.th_content" :finish="item.th_isfinish"></todoItem>
    </div>
    <div v-else>
      <h4>啊噢！当前暂无任务</h4>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref } from 'vue';
import todoItem from '../components/todoItem.vue';
import { getThings } from '../utils/api';
import { useThingsStore } from '../store/thingsStore';
defineComponent({
  components:{
    todoItem
  }
})
const thingsStore = useThingsStore()
onMounted(async function (){
  await thingsStore.updateList()
  // finishList.value = thingsStore.finishList
})
</script>

<style scoped>
  .finishContainer {
    width: 85%;
    padding: 0 5% 5%;
    margin: 0 auto;
    color: black;
    /* background-color: aqua; */
  }
  h3 {
    text-align: left;
  }
</style>